<template>
  <div class="mainbox">
    <banner></banner>
    <main-content :catname="catename">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-xiangcun"></span>新时代文明实践</dt>
          <!--<dd>-->
            <!--<h3 class="menu_dd" :class="{'have':showSubService,'hover':active==1}" @click="onShowSub(1)">志愿服务项目-->
              <!--<i v-if="!showSubService" class="el-icon-caret-bottom"></i>-->
              <!--<i v-else class="el-icon-caret-top"></i>-->
            <!--</h3>-->
            <!--<ul v-show="showSubService">-->

              <!--<li class="son_menu" >-->
                <!--<router-link :to="{name: 'ServiceContent'}">服务内容-->
                <!--</router-link>-->
              <!--</li>-->

              <!--<li class="son_menu" >-->
                <!--<router-link :to="{name: 'ServiceStatus'}">服务状态-->
                <!--</router-link>-->
              <!--</li>-->

              <!--<li class="son_menu" >专家团队</li>-->

            <!--</ul>-->
          <!--</dd>-->

          <dd class="menu_dd">
            <router-link :to="{name: 'ListNew'}">志愿服务项目</router-link>
          </dd>

          <dd class="menu_dd">
            <router-link :to="{name: 'sixNews'}">六传六讲</router-link>
          </dd>

          <dd class="menu_dd" :class="{'hover':active == 3}">
            <router-link :to="{name: 'PointsMall'}" @click="onTab(3)">积分商城</router-link>
          </dd>

          <dd>
            <h3 class="menu_dd" :class="{'have':showSub,'hover':active == 2}" @click="onShowSub(2)">积分银行
              <i v-if="!showSub" class="el-icon-caret-bottom"></i>
              <i v-else class="el-icon-caret-top"></i>
            </h3>
            <ul v-show="showSub">
              <li class="son_menu" :class="{'hover':activeNo == 1}" @click="menuTab({id:1,name:'星级家庭'})">
                <router-link :to="{name: 'StarFamily'}">星级家庭</router-link>
              </li>
              <li class="son_menu " :class="{'hover':activeNo == 2}" @click="menuTab({id:2,name:'红榜'})">
                <router-link :to="{name: 'RedList'}">红榜</router-link>
              </li>
              <li class="son_menu " :class="{'hover':activeNo == 3}" @click="menuTab({id:3,name:'黑榜'})">
                <router-link :to="{name: 'BlackList'}">黑榜</router-link>
              </li>
              <li class="son_menu " :class="{'hover':activeNo == 4}" @click="menuTab({id:4,name:'家庭积分榜'})">
                <router-link :to="{name: 'Ranking'}">家庭积分榜</router-link>
              </li>
            </ul>
          </dd>

        </dl>
      </div>
      <div class="inner_content" slot="inner_content">
        <div class="page_con">
        <router-view />
        </div>
      </div>

    </main-content>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>

  import Ranking from './children/ranking'
  import StarFamily from './children/star_family'
  import RedList from './children/RedList'
  import BlackList from './children/BlackList'

  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';

  export default {
    name: "score_list",
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
    },
    data(){
      return {
        active:2,
        catename:'积分银行',
        activeNo: '',
        showSubService: false,
        showSub: false,
        menu_bg:''
        //scoreActive:0,//积分银行下拉菜单默认激活项，默认第一个
      }
    },
    created(){
      this.menu_bg=this.$util.storage.get("menu_bg");
    },

    methods: {
      onTab(i){
        this.active = i;
        this.showSubService = false;
        this.showSub = false;
      },

      menuTab(item) {
        let that = this;
        that.activeNo = item.id;
        that.catename = item.name;
      },

      onShowSub(i) {
        if (i == 1) {
          if (this.showSubService) {
            this.showSubService = false;
          } else {
            this.showSubService = true;
            this.showSub = false;
          }
        } else if (i == 2) {
          if (this.showSub) {
            this.showSub = false;
          } else {
            this.active = i;
            this.showSub = true;
            this.showSubService = false;
          }
        }
      },
    }
  }
</script>

<style scoped>
  .page_con{
    padding-right: 0px !important;
  }
  .son_menu{
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color:#fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }
  .son_menu.hover{
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }
  .menu_dd.have{
    transition: all 0.3s ease-in;
  }
  .inner_content {
    padding: 60px 40px 0 40px;
  }
</style>
